<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="pl15 pr15">

					<view class="mt15 area_block_1" v-for="item,index in imgs" :key="index">
						<view class="flex_box">
							<view class="re mr25">
								<image :src="item.img ? item.img : '/static/icon_file_img.png'" class="flie_img vt" @tap="uploadFile(index)"></image> 					</view>
							<view class="item">
								<textarea class="describe_textarea" placeholder="请在这里填写图片描述"
									placeholder-style="color: #999;" v-model="item.content"></textarea>
							</view>
						</view>
					</view>


				</view>
			</view>

			<!-- 新增-按钮 -->
			<view class="add_btn_file" @tap="addItem">新增</view>

			<!-- 提交-按钮 -->
			<view class="consult_immediately_btn" @tap="sub">提交</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		uploadDiggerImgApi,
		uploadImgApi,
		confirmSellApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				id: 0,
				imgs: [{
					img: '',
					content: ''
				}],
				new_item: {
					img: '',
					content: ''
				}
			}
		},
		onLoad(options) {
			if (!options.id) {
				toast('参数不正确！');
				return false;
			}
			this.id = options.id;
		},
		methods: {
			uploadFile(index) {
				let that = this;
				uni.chooseImage({
					count: 1,
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: function (res) {
						console.log(res.tempFilePaths);
						showLoading('上传中');
						uploadImgApi({
							file: res.tempFilePaths[0],
							id: 3
						}).then(result=>{
							that.imgs[index].img = result.data;
							hideLoading();
						}).catch(error=>{
							hideLoading();
						})
				    }
				});

			},
			
			
			delImg(index) {
				this.imgs[index],img = '';
			},
			
			
			addItem() {
				let new_item = {};
				new_item.img = '';
				new_item.content = '';
				this.imgs.push(new_item);
			},
			
			sub() {
				let imgs = [];
				for (let i in this.imgs) {
					if (this.imgs[i].img && this.imgs[i].content) {
						imgs.push(this.imgs[i]);
					}
				}
				if (imgs.length <= 0) {
					toast('请上传详情图片');
					return false;
				}
				let that = this;
				showLoading('提交中');
				uploadDiggerImgApi({
					id: this.id,
					imgs: JSON.stringify(imgs)
				}).then(res=>{
					uni.showModal({
					    title: '提示',
					    content: '确定上架吗？',
					    success: function (result) {
					        if (result.confirm) {
								showLoading('提交中');
					            confirmSellApi({
									id: that.id
								}).then(resultapi=>{
									toast('上架成功！');
									setTimeout(function(){
										uni.redirectTo({
										    url: '/pages/on_site_inspection/on_site_inspection'
										});
									},1500)
									hideLoading();
								}).catch(errorapi=>{
									toast(errorapi.msg);
									hideLoading();
								})
					        } else if (result.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					hideLoading();
					
				}).catch(err=>{
					hideLoading();
				})
			}
			
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f7f6f6;
	}

	.area_block_1 {
		position: relative;
		padding: 25rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.flie_img {
		width: 200rpx;
		height: 200rpx;
	}

	.describe_textarea {
		display: inline-block;
		width: 100%;
		height: 200rpx;
		padding: 15rpx 0;
		font-size: 28rpx;
		color: #333;
		background-color: transparent;
		border: none;
		border-radius: 0;
		outline: none;
		resize: none;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.add_btn_file {
		display: flex;
		position: fixed;
		right: 25rpx;
		bottom: 20%;
		width: 100rpx;
		height: 100rpx;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
		border-radius: 50%;
		z-index: 5;
	}
</style>
